<!--
 * @Author: your name
 * @Date: 2021-12-15 16:54:52
 * @LastEditTime: 2021-12-16 15:18:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day7\my-app\src\views\Home\Merchant.vue
-->

/<template>
  <div class="shop">
    <div class="shop_con">
      <p>全选:{{allcheck}}<input type="checkbox" v-model="allcheck" @change="allC" /></p>
      <p>总价:0</p>
      <p>总量:0</p>
    </div>
    <dl v-for="(item, index) in shopList" :key="index">
      <dt>
        <input type="checkbox" v-model="item.flag" @change="itemCheck" />
        <img :src="item.img" alt="" />
      </dt>
      <dd>
        <b>{{ item.name }}</b>
        <div>
          <span>{{ item.price }}</span>
          <p>
            <button v-if="item.count > 0" @click.stop="redNums(item.id)">
              -
            </button>
            <span v-if="item.count > 0">{{ item.count }}</span>
            <button @click.stop="addNums(item.id)">+</button>
          </p>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["shopList","allc"]),
  },
  methods: {
    ...mapActions(["getShoplist", "addNum", "redNum", "AllChecks","ItemChecks"]),
    // 添加
    addNums(id) {
      this.addNum({ id });
    },
    //  减减
    redNums(id) {
      this.redNum({ id });
    },
    //   全选
    allC() {
        this.AllChecks(this.allcheck)
    },
    // 反选
    itemCheck() {
      this.ItemChecks()
    },
  },
  //   获取数据
  mounted() {

    this.getShoplist();
  },
  data () {
      return {
          allcheck:false
      }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: calc(100vh - 100px);
  .shop_con {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  dl {
    display: flex;
    align-items: center;
    margin: 10px 0px;
    dt {
      width: 140px;
      height: 100px;
      display: flex;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
        margin: 0px 10px;
      }
    }
    button {
      width: 15px;
      height: 15px;
    }
  }
}
</style>